<template>
 <div>
     <nav-bar>
         <span slot="left" class="title-left" @click="back">
             <img src="~assets/img/common/back.svg" alt="">
         </span>
         <div slot="center" class="title">
             <div v-for="(item,index) in titles" class="title-item" :key="index"
             :class="{active:index===currentIndex}" @click="itemClick(index)" >
                 {{item}}
             </div>
         </div>
         
     </nav-bar>
 </div>
</template>

<script>
import NavBar from 'components/common/navbar/NavBar'
 export default {
  name:'',
  data () {
   return {
       titles:['商品','参数','评论','推荐'],
       currentIndex:0
   };
  },

  components: {
      NavBar
  },

  computed: {},

  beforeMount() {},

  mounted() {},

  methods: {
      itemClick(index){
          this.currentIndex=index
          this.$emit("titleClick",index)
      },
      back(){
          //返回
          this.$router.back()
      }
  },

  watch: {}

 }

</script>
<style scoped>
    .title{
        display: flex;
    }
    .title-item{
        flex: 1;
    }
    .title-left img{
        margin-top: 10px;
        /* width: 20px; */
    }
    .active{
        color:var(--color-tint);
    }
</style>